<script setup>
	import SongItemProp from "@/const/SongItemProp.js";
	const props = defineProps(SongItemProp);

	const goSongs = () => {
		uni.navigateTo({ url: "/pages/songs/index" });
	};
</script>
<template>
	<section class="song-item" @click="goSongs">
		<image
			:class="{ circle: props.type === 'artist' }"
			:src="props.cover"
			mode="scaleToFill"
		/>
		<div class="singer" :class="{ center: props.type === 'artist' }">
			{{ props.singer }}
		</div>
		<div class="name" v-if="props.type === 'song'">
			{{ props.name }}
		</div>
	</section>
</template>

<style lang="scss" scoped>
	.song-item {
		width: 136px;
		margin-top: 14px;
		margin-right: 18px;
		image {
			width: 136px;
			height: 116px;
			border-radius: 16px;
			object-fit: contain;
			&.circle {
				width: 116px;
				border-radius: 50%;
			}
		}
		.singer {
			font-size: 12px;
			color: #dfeff0;
			margin-top: 6px;
			&.center {
				text-align: center;
			}
		}
		.name {
			font-size: 10px;
			color: #dfeff0;
			margin-top: 6px;
		}
	}
</style>
